<f:view id="ajaxEcho" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">
	<h:head />

	<body>
	    <ui:composition>
	    	<h:panelGroup id="contatos">
		    	<p:fieldset legend="Emails" style="margin-bottom:20px">
					<h:panelGrid id="emails" style="" >
						<div id="emails">
							<ui:repeat  id="email" var="email" value="#{pessoaController.pessoa.emails}">
								<h:panelGrid columns="5" columnClasses="label, label, label, label, label">
									<h:outputText value="Email: " />
									<p:inputText value="#{email.email}"
										readonly="${readonly}" validator="emailValidator" required="true">
										<f:validateRegex
											pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
										<f:attribute name="idPessoa"
											value="#{pessoaController.pessoa.id}" />
									</p:inputText>
									<h:outputText value="Tipo: " />
									<p:selectOneMenu id="tipoEmail" value="#{email.tipoEmail}" disabled="${readonly}">
										<f:selectItems value="#{pessoaController.tipoEmail}"/>
									</p:selectOneMenu>
									<p:commandButton id="excluir" value="Excluir Email" action="#{pessoaController.pessoa.removerEmail(email)}"  ajax="false" update="emails"  rendered="#{!readonly}" immediate="true" process="@this" icon="ui-icon-trash"/><br/>
								</h:panelGrid>
								</ui:repeat>
							<h:outputText rendered="#{not empty pessoaController.pessoa.emails}" value="Total de emails: #{pessoaController.pessoa.emails.size()}" style="font-weight: bold;"/>
							<br/>
						</div>
					<p:commandButton  value="Adicionar Email" actionListener="#{pessoaController.pessoa.adicionarNovoEmail()}" process="emails" update="emails" rendered="#{!readonly}" icon="ui-icon-plus"/>
					</h:panelGrid>
				</p:fieldset>
				
				<p:fieldset legend="Telefones" style="margin-bottom:20px">
				<h:panelGrid id="telefones" cellpadding="5">
					<div id="telefones">
						<ui:repeat  id="telefone" var="telefone" value="#{pessoaController.pessoa.telefones}">
							<h:panelGrid columns="5" columnClasses="label, value, label, value, botao">	
								<h:outputText value="Telefone: " />
								<p:inputMask value="#{telefone.numeroTelefone}" readonly="${readonly}" mask="(99) 9999-9999" required="true">
								</p:inputMask>
								<h:outputText value="Tipo: " style="width:100px;heigth:200px"/>
									<p:selectOneMenu id="tipoTelefone" value="#{telefone.tipoTelefone}"> 
       						 			<f:selectItems value="#{pessoaController.tipoTelefone}"/> 
       								</p:selectOneMenu>
								<p:commandButton id="excluir" value="Excluir Telefone" action="#{pessoaController.pessoa.removerTelefone(telefone)}"  ajax="false" update="emails"  rendered="#{!readonly}" immediate="true" process="@this" icon="ui-icon-trash"/><br/>
							</h:panelGrid>
							</ui:repeat>
						<h:outputText rendered="#{not empty pessoaController.pessoa.telefones}" value="Total de Telefones: #{pessoaController.pessoa.telefones.size()}" style="font-weight: bold;"/>
						<br/>
					</div>
					<p:commandButton  value="Adicionar Telefone" actionListener="#{pessoaController.pessoa.adicionarNovoTelefone()}" process="telefones" update="telefones" rendered="#{!readonly}" icon="ui-icon-plus"/>
				</h:panelGrid>
				</p:fieldset>
			</h:panelGroup>
	    </ui:composition>
    </body>
    </f:view>

